import React from 'react';
import { Toast } from 'antd-mobile'
import { connect } from 'react-redux';

import UEditor from '../component/UEditor';
import { getSupervisionCheck } from '../common/service'
import { saveData } from '../action/UserAction'
import NoPowerShow from '../component/NoPowerShow'

class CheckConstruction extends React.Component {
	constructor(props){
		super(props)
		this.state = {
			equipmentArr: this.props.userReducer.step.planInfoRes ? this.props.userReducer.step.planInfoRes.deviceIds : [],
			cantConstruction: this.props.userReducer.step.planInfoRes ? this.props.userReducer.step.planInfoRes.isconstruct : 1,   //是否无法施工
			equipmentNum: '', //填写的设备数量
			weatherReason: '654', //天气原因
			constructionText: this.props.userReducer.step.planInfoRes ? this.props.userReducer.step.planInfoRes.constructionContent[0].content : '', //施工区域
			carNum: this.props.userReducer.step.planInfoRes ? this.props.userReducer.step.planInfoRes.vehicleNum : '', //车辆数量
			personalNum: this.props.userReducer.step.planInfoRes ? this.props.userReducer.step.planInfoRes.personNum : '', //人员数量
			cantConstructionReason: this.props.userReducer.step.planInfoRes ? this.props.userReducer.step.planInfoRes.remark : '', //无法施工原因
		}
	}
	
	commit() {
		const { showLoadModal, hideLoadModal } = this.props;
		showLoadModal();
		getSupervisionCheck(this.props.userReducer.flowId)
		.then((data) => {
			hideLoadModal();
			const isOK = data.data;
			if (isOK.success) {
				this.props.dispatch(saveData(isOK.obj));
				if (isOK.obj.flowBaseInfo.status === 3 && isOK.obj.planInfoRes.status === 1) {
					this.props.changePage(20);
				} else {
					this.props.currentPage(isOK.obj.flowBaseInfo.flowProcesses);
				}
			} else {
				Toast.info(isOK.msg, 2);
			}
		})
		.catch((e) => {
			hideLoadModal();
			console.log(e);
			Toast.info('服务器异常', 2);
		})
	}

	render() {
		//判断是不是当前节点
		if (this.props.currentObj.flowId !== 14 || -1 === this.props.userReducer.roles.findIndex((value) => value === 57)) {
			return (<NoPowerShow id={this.props.currentObj.flowId}></NoPowerShow>);
		}
		return (
			<div style={{padding: '1.42rem 0.2rem 0.3rem 0.2rem'}}>
					{/* 如果无法施工显示的内容不同 */}
					{this.state.cantConstruction===1 ?
					<div>
						<span className='num-title'>车辆数量</span>
						<span style={{fontSize: '0.32rem',color: '#0e8dea'}}>{this.state.carNum}</span>
						<span className='equipment-title'>设备</span>
						{this.state.equipmentArr.map((data, index) => {
							return (
								<div style={{paddingLeft: '0.15rem', marginBottom: '0.2rem'}} key={index}>
									<span style={{fontSize: '0.32rem',marginRight:'0.4rem', color: '#ccc'}}>{data.commonName}</span>
									<span style={{fontSize: '0.32rem',color: '#0e8dea'}}>{data.commonNum}</span>
								</div>
							);
						})}
						<div style={{marginTop: '0.54rem'}}>
							<span className='num-title'>人员数量</span>
							<span style={{fontSize: '0.32rem',color: '#0e8dea'}}>{this.state.personalNum}</span>
						</div>
						<div style={{marginTop: '0.8rem'}}>
							<p className='num-title' style={{marginBottom: '0.32rem'}}>施工计划文档</p>
							<UEditor id="content" height="200" toolbars={[]} disabled={true} value={this.state.constructionText}/>  
						</div>
					</div> : 
						<div>
							<div style={{display:'flex',flexDirection:'row',alignItems:'center'}}>
								<span	style={{fontSize: '0.32rem',fontWeight: 'bold'}}>
									无法施工
								</span>
							</div>
							<div className='cantConstruction'>
								<span style={{fontSize:'0.32rem'}}>原因</span>
								<p className='construction-plan-document'>{this.state.cantConstructionReason}</p>
							</div>
						</div>
					} 
					{ -1 === this.props.userReducer.roles.findIndex((value) => value === 58) || !this.props.isTodayStep() ? null :
						<div className='btnCommitConstruction'>
						{this.state.cantConstruction === 1 ?
							<div 
								id='comfireConstructionBtn'
								className='btnCommit'
								onTouchStart={()=>{document.getElementById('comfireConstructionBtn').style.backgroundColor = '#D97442'}}
								onTouchEnd={()=>{document.getElementById('comfireConstructionBtn').style.backgroundColor = '#FFA24A'}}
								onClick={()=>{
									this.commit()
								}}
								>
								确认施工
							</div>
							 : 
							<div 
								id='connotConstructionBtn'
								className='btnCommit'
								onTouchStart={()=>{document.getElementById('connotConstructionBtn').style.backgroundColor = '#D97442'}}
								onTouchEnd={()=>{document.getElementById('connotConstructionBtn').style.backgroundColor = '#FFA24A'}}
								onClick={()=>{
									this.commit()
								}}
								>
								结束施工
							</div>
						}
						</div>
					}
				</div>
		);
	}
}


function mapStateToProps(state) {
  const { userReducer } = state;
  return {
    userReducer
  };
}

export default connect(mapStateToProps)(CheckConstruction);